import React, { Component } from 'react';
import { Icon } from 'antd';
import 'styles/scan-receive/slider.scss';

class ColumnLayoutLeft extends Component {
  render() {
    const { children, style = {}, className = '', collapsedLeft, _onClickCollapse } = this.props;
    return <div className={`column-layout-left ${collapsedLeft ? 'collapsed' : ''} ${className}`} style={style}>
      {children}
      {
        !collapsedLeft &&
        <Icon
          type={collapsedLeft ? 'menu-fold' : 'menu-unfold'}
          className='collapsed-icon'
          onClick={_onClickCollapse}
        />
      }
    </div>;
  }

  static defaultProps = {
    _left: true
  };
}

class ColumnLayoutRight extends Component {
  render() {
    const { children, style = {}, className = '', collapsedRight, _onClickCollapse, collapsedLeft } = this.props;
    return <div className={`column-layout-right ${collapsedRight ? 'collapsed' : ''} ${className}`} style={style}>
      <Icon
        type={collapsedRight ? 'menu-unfold' : 'menu-fold'}
        className='collapsed-icon'
        onClick={_onClickCollapse}
      />
      {!collapsedLeft && children}
    </div>;
  }

  static defaultProps = {
    _right: true
  };
}

class ColumnLayout extends Component {

  state = {
    collapsedLeft: window.localStorage.getItem('hly.scan.collapsed') === '1',
    collapsedRight: false
  };

  renderChildren = () => {
    const { children, leftWidth, onClickCollapse } = this.props;
    const { collapsedLeft, collapsedRight } = this.state;
    return React.Children.map(children, child => {
      if (typeof child !== 'string' && child !== null) {
        if (child.props._left) {
          return React.cloneElement(child, {
            ...child.props,
            collapsedLeft,
            _onClickCollapse: () => {
              window.localStorage.setItem('hly.scan.collapsed', !collapsedLeft ? '1' : '0');
              this.setState({
                collapsedLeft: !collapsedLeft,
                collapsedRight: false
              }, () => onClickCollapse && onClickCollapse({
                collapsedLeft: !collapsedLeft,
                collapsedRight: false
              }));
            },
            style:
              {
                ...child.props.style,
                width: collapsedLeft ? 'calc(100% - 40px)' : leftWidth,
              }
          });
        }
        if (child.props._right) {
          return React.cloneElement(child, {
            ...child.props,
            collapsedRight,
            collapsedLeft,
            _onClickCollapse: () => {
              window.localStorage.setItem('hly.scan.collapsed', '0');
              this.setState({
                collapsedRight: collapsedLeft ? false : !collapsedRight,
                collapsedLeft: false
              }, () => onClickCollapse && onClickCollapse({
                collapsedRight: !collapsedRight,
                collapsedLeft: false
              }));
            },
            style: collapsedRight ?
              { left: 0, width: '100%', opacity: 1 } :
              {
                left: collapsedLeft ? 'calc(100% - 40px)' : leftWidth,
                width: `calc(100% - ${leftWidth}px)`,
              }
          });
        }
        return child;
      } else {
        return child;
      }
    });
  };

  render() {
    return (
      <div className='column-layout'>
        {this.renderChildren()}
      </div>
    );
  }

}

ColumnLayout.ColumnLayoutLeft = ColumnLayoutLeft;
ColumnLayout.ColumnLayoutRight = ColumnLayoutRight;

export default ColumnLayout;
